<template>
  <div class="grid grid-cols-4 gap-x-3">
    <el-form-item label="紫鸟账号">
      <VSelect v-model="form.account" placeholder="请选择" :options="options.ziniao_account" select filterable clearable :class="ziniaoContactPerson ? 'w-8/12' : 'w-full'" />
      <div class="ml-1 leading-6">
        <VText :value="ziniaoContactPerson" />
      </div>
    </el-form-item>
    <el-form-item label="配置IP">
      <el-input v-model="form.ip" placeholder="请输入" class="w-full" />
    </el-form-item>
    <el-form-item label="存续周期">
      <VSelect v-model="form.period" placeholder="请选择" :options="options.ziniao_period" filterable clearable class="w-full" />
    </el-form-item>
    <el-form-item label="续费时间">
      <el-date-picker v-model="form.renewal_time" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
    </el-form-item>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['update:modelValue'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const ziniaoContactPerson = computed(() => {
  const account = form.value.account
  if (props.options && account) {
    const item = props.options.ziniao_account.find(v => v.value === account)
    return item.contact_person
  }
  return null
})
</script>